<template>
  <Layout>
    <Header class="bg-white px-0">
      <!-- 头部导航 -->
      <Menu
        mode="horizontal"
        active-name="1"
        class="d-flex align-items-center pr-3"
        :active-name="menuActive"
        @on-select="handleMenuSelect"
      >
        <h4>企业网盘</h4>
        <MenuItem :name="index" v-for="(item, index) in topMenus" :key="index">
          <Icon :type="item.icon" />
          {{ item.title }}
        </MenuItem>
        <Dropdown class="ml-auto" @on-click="selectedItem">
          <a href="javascript:void(0)">
            <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
            {{ username }}
            <Icon type="ios-arrow-down"></Icon>
          </a>
          <DropdownMenu slot="list">
            <DropdownItem name="personal">个人资料</DropdownItem>
            <DropdownItem name="password">修改密码</DropdownItem>
            <DropdownItem name="quit">安全退出</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </Menu>
    </Header>
    <Layout>
      <!-- 侧边导航 -->
      <Sider hide-trigger>
        <Menu
          :active-name="siderActive"
          width="200"
          @on-select="handleSiderSelect"
        >
          <MenuGroup title="全部文件">
            <MenuItem name="0">
              <Icon type="md-document" />
              图片
            </MenuItem>
            <MenuItem name="1">
              <Icon type="md-document" />
              音乐
            </MenuItem>
            <MenuItem name="2">
              <Icon type="md-chatbubbles" />
              视频
            </MenuItem>
            <MenuItem name="3">
              <Icon type="md-chatbubbles" />
              其他
            </MenuItem>
          </MenuGroup>
          <MenuGroup title="其他操作">
            <MenuItem name="4">
              <Icon type="md-heart" />
              我的分享
            </MenuItem>
            <MenuItem name="5">
              <Icon type="md-leaf" />
              回收站
            </MenuItem>
          </MenuGroup>
          <!-- 进度条 -->
          <Progress
            :percent="per"
            :stroke-color="['#108ee9', '#87d068']"
            class="px-3"
            hide-info
          />
          <p class="progress-p d-flex justify-content-between px-3">
            <span class="small">总共:{{ total_size / 1024 / 1024 }}GB</span>
            <span class="small text-warning"
              >已用:{{ (used_size / 1024 / 1024).toFixed(3) }}G</span
            >
          </p>
        </Menu>
      </Sider>
      <Content class="bg-white">
        <router-view />
      </Content>
    </Layout>
  </Layout>
</template>

<script>
import saveApi from "../api/save";
export default {
  data() {
    return {
      username: "",
      menuActive: 0,
      siderActive: 0,
      topMenus: [
        {
          icon: "ios-paper",
          title: "⽹盘",
        },
        {
          icon: "ios-people",
          title: "分享",
        },
        {
          icon: "ios-construct",
          title: "更多",
        },
      ],
      //磁盘空间
      total_size: 0,
      used_size: 0,
      per: 0
    };
  },
  methods: {
    // 头部导航
    handleMenuSelect(index) {
      this.menuActive = index;
      console.log(this.menuActive);
    },
    // 侧边栏导航
    handleSiderSelect(index) {
      this.menuActive = index;
    },
    // 获取磁盘空间
    getSize() {
      saveApi.getSize().then((response) => {
        console.log(response);
        if (response.status == 200) {
          this.total_size = response.data.data.total_size;
          this.used_size = response.data.data.used_size;
          this.per = this.used_size / this.total_size * 100
          console.log(this.per);
        }
      });
    },
    // 退出登录
    selectedItem(name) {
      if (name == "quit") {
        this.$store
          .dispatch("loginOut")
          .then((response) => {
            if (response.status == 200) {
              this.$Message.success(response.data.data);
              this.$router.push("/login");
            }
          })
          .catch((error) => this.$Message.error(error.response.data.data));
      }
    },
  },
  created() {
    this.username = this.$store.state.user.username;
    this.getSize();
  },
};
</script>

<style lang="scss" scoped>
.ivu-layout {
  height: 100%;
}
.ivu-menu {
  height: 100%;
  h4 {
    width: 200px;
    text-align: center;
  }
}
.ivu-progress {
  position: absolute;
  bottom: 42px;
  /deep/.ivu-progress-inner {
    background: #fff;
    border: 1px solid #eee;
  }
}
.progress-p {
  position: absolute;
  bottom: 16px;
  width: 100%;
}
// /deep/.ivu-layout-sider{
//   background-color: red!important;;
// }
</style>
